Coding JavaScript for Mobile Browsers (part 9) - Scripting Styles

4. Scripting Styles

Changing content with JavaScript is useful, but sometimes it’s easier to use styles from JavaScript to make things appear and disappear and change their appearance.

4.1. Changing styles

With DOM support, we can read and dynamically change every inner CSS style using style and its subproperties, like backgroundColor, textAlign, and margin. We can also change CSS styles using the className property of every element. Table 20 explores which browsers support changing the class, removing the class, and applying multiple classes using a space (e.g., class1 class2).

4.2. Showing and hiding styles

Table 21 shows which browsers support showing and hiding block content using element.style.display='none' or element.style.display='block'. We can also use style.visibility, but in this case the block will still occupy the box without showing its contents.